<template>
    <div class="about">
        <div class="left">
            <el-container>
                <el-aside width="209px">
                    <div class="navs">
                        <img src="https://cdn7.axureshop.com/demo2024/2281499/images/%E5%AE%B6%E5%BA%AD%E5%8C%BB%E7%94%9Fpc%E6%BC%94%E7%A4%BA%E6%A1%86%E6%9E%B6/u77.png"
                            alt="">
                        家庭医生管理平台
                    </div>
                    <el-aside id="left" width="209px" style="background-color: rgb(238, 241, 246)">
                        <el-menu :default-openeds="['0', '7']">
                            <el-submenu index="0">
                                <template slot="title">
                                    <img src="https://cdn7.axureshop.com/demo2024/2281499/images/%E5%AE%B6%E5%BA%AD%E5%8C%BB%E7%94%9Fpc%E6%BC%94%E7%A4%BA%E6%A1%86%E6%9E%B6/p0.svg"
                                        alt="">
                                    首页
                                </template>
                            </el-submenu>
                            <el-submenu index="1">
                                <template slot="title">
                                    <img src="https://cdn7.axureshop.com/demo2024/2281499/images/%E5%AE%B6%E5%BA%AD%E5%8C%BB%E7%94%9Fpc%E6%BC%94%E7%A4%BA%E6%A1%86%E6%9E%B6/p1.svg"
                                        alt="">
                                    医生管理
                                </template>
                                <el-menu-item index="1-1">全部医生</el-menu-item>
                                <el-menu-item index="1-2">调动申请</el-menu-item>
                            </el-submenu>
                            <el-submenu index="2">
                                <template slot="title">
                                    <img src="https://cdn7.axureshop.com/demo2024/2281499/images/%E5%AE%B6%E5%BA%AD%E5%8C%BB%E7%94%9Fpc%E6%BC%94%E7%A4%BA%E6%A1%86%E6%9E%B6/p2.svg"
                                        alt="">
                                    居民管理
                                </template>
                                <el-menu-item index="2-1">全部居民</el-menu-item>
                                <el-menu-item index="2-2">社区管理</el-menu-item>
                            </el-submenu>
                            <el-submenu index="3">
                                <template slot="title">
                                    <img src="https://cdn7.axureshop.com/demo2024/2281499/images/%E5%AE%B6%E5%BA%AD%E5%8C%BB%E7%94%9Fpc%E6%BC%94%E7%A4%BA%E6%A1%86%E6%9E%B6/p3.svg"
                                        alt="">
                                    商品管理
                                </template>
                                <el-menu-item index="3-1">药物管理</el-menu-item>
                                <el-menu-item index="3-2">医疗器械</el-menu-item>
                            </el-submenu>
                            <el-submenu index="4">
                                <template slot="title">
                                    <img src="https://cdn7.axureshop.com/demo2024/2281499/images/%E5%AE%B6%E5%BA%AD%E5%8C%BB%E7%94%9Fpc%E6%BC%94%E7%A4%BA%E6%A1%86%E6%9E%B6/p4.svg"
                                        alt="">
                                    数据管理</template>
                                <el-menu-item index="4-1">数据统计</el-menu-item>
                                <el-menu-item index="4-2">数据分析</el-menu-item>
                            </el-submenu>
                            <el-submenu index="5">
                                <template slot="title">
                                    <img src="https://cdn7.axureshop.com/demo2024/2281499/images/%E5%AE%B6%E5%BA%AD%E5%8C%BB%E7%94%9Fpc%E6%BC%94%E7%A4%BA%E6%A1%86%E6%9E%B6/p5.svg"
                                        alt="">
                                    业务管理
                                </template>
                                <el-menu-item index="5-1">服务记录</el-menu-item>
                                <el-menu-item index="5-2">智能服务</el-menu-item>
                                <el-menu-item index="5-3">结算收益</el-menu-item>
                            </el-submenu>
                            <el-submenu index="6">
                                <template slot="title">
                                    <img src="https://cdn7.axureshop.com/demo2024/2281499/images/%E5%AE%B6%E5%BA%AD%E5%8C%BB%E7%94%9Fpc%E6%BC%94%E7%A4%BA%E6%A1%86%E6%9E%B6/p6.svg"
                                        alt="">
                                    合作机构
                                </template>
                                <el-menu-item index="6-1">卫生院</el-menu-item>
                                <el-menu-item index="6-2">医疗机构</el-menu-item>
                            </el-submenu>
                            <el-submenu index="7">
                                <template slot="title">
                                    <img src="https://cdn7.axureshop.com/demo2024/2281499/images/%E5%AE%B6%E5%BA%AD%E5%8C%BB%E7%94%9Fpc%E6%BC%94%E7%A4%BA%E6%A1%86%E6%9E%B6/p7.svg"
                                        alt="">
                                    系统管理
                                </template>
                                <el-menu-item index="7-1">账号管理</el-menu-item>
                                <el-menu-item index="7-2">知识库</el-menu-item>
                                <el-menu-item index="7-3">广告管理</el-menu-item>
                                <el-menu-item index="7-4">提醒配置</el-menu-item>
                                <el-menu-item index="7-5">服务配置</el-menu-item>
                            </el-submenu>
                        </el-menu>
                    </el-aside>
                </el-aside>
                <el-container>
                    <el-header>
                        <div class="identitysc">
                            <div class="identity" @click="expand">
                                <img src="https://cdn7.axureshop.com/demo2024/2281499/images/%E9%A6%96%E9%A1%B5/u162.svg"
                                    alt="">
                                <P>管理员</P>
                                <i></i>
                            </div>
                            <div class="identitys" :style="[{ top: tops + 'px' }, { opacity: opa }]">
                                <p>修改密码</p>
                                <p>退出登录</p>
                            </div>
                        </div>
                    </el-header>
                    <el-main>
                        <!-- <IndexRight></IndexRight> -->
                        <!-- <AllDoctor></AllDoctor> -->
                        <!-- <TransferApply></TransferApply> -->
                        <!-- <AllResident></AllResident> -->
                        <!-- <CommunityManage></CommunityManage> -->
                        <Drugs></Drugs>
                        <!-- <ServiceRecords></ServiceRecords> -->
                    </el-main>
                    <el-footer>版权所有 © 2024</el-footer>
                </el-container>
            </el-container>
        </div>
    </div>
</template>

<script>
import AllDoctor from '../components/AllDoctor.vue';
import IndexRight from "../components/IndexRight.vue";
import TransferApply from '@/components/TransferApply.vue';
import AllResident from '../components/AllResident.vue';
import CommunityManage from '@/components/CommunityManage.vue';
import Drugs from '@/components/Drugs.vue';
import ServiceRecords from '../components/ServiceRecords.vue';
export default {
    components:{
        IndexRight,
        AllDoctor,
        TransferApply,
        AllResident,
        CommunityManage,
        Drugs,
        ServiceRecords
    },
    data() {
        return {
            isCollapse: false,
            tops:-48,
            expands:true,
            opa:0,
        };
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        expand(){
            if(this.expands){
                this.tops=48
                this.opa=1
            }else{
                this.tops=-48
                this.opa=0
            }
            this.expands=!this.expands
        }
    }
}
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
}

html>>>body {
    margin: 0 !important;
}

.el-header,
.el-footer {
    /* width: 1712px; */
    height: 48px !important;
    background-color: rgba(255, 255, 255, 1);
    color: #333;
    text-align: center;
    line-height: 48px;
}

.el-aside {
    min-height: 910px;
    /* height: 100vh; */
    color: #333;
    text-align: center;
    line-height: 200px;
    background-color: rgba(0, 96, 208, 1) !important;
    overflow-x: hidden;
    position: relative;
}
#left{
    width: 227px !important;
}
.el-aside img {
    width: 18px;
    height: 18px;
    margin-right: 10px
}

.el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
}

body>.el-container {
    margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
    line-height: 260px;   
}

.el-container:nth-child(7) .el-aside {
    line-height: 320px;
}

.navs {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    font-family: 'PingFang-SC-Medium', 'PingFang SC Medium', 'PingFang SC ExtraLight', 'PingFang SC', sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 18px;
    color: #FFFFFF;
}

.navs img {
    width: 40px;
    height: 40px;
    margin-right: 5px
}

.el-menu {
    width: 100%;
    color: #fff !important;
    background-color: rgba(0, 127, 255, 1) !important;
    position: absolute;
    top: 0;
}

.el-submenu>>>.el-submenu__title {
    display: flex;
    align-items: center;
    color: #fff !important;
    text-align: center;
}

.el-submenu>>>.el-submenu__title:hover {
    background-color: rgba(0, 127, 255, 1);
}

.firstpage {
    width: 100%;
    height: 48px;
    text-align: center;
    color: #fff;
    line-height: 48px;
}

.el-submenu>>>.el-submenu__title {
    color: #fff !important;
    background-color: rgba(0, 96, 208, 1);
}

.el-submenu>>>.el-menu-item {
    color: #fff !important;
    background-color: rgba(0, 85, 178, 1);
}

.el-menu-item:focus,
.el-menu-item:hover {
    background-color: rgba(0, 127, 255, 1);
}

.identitysc {
    width: 136px;
    height: 48px;
    float: right;
    position: relative !important;
}

.identity {
    width: 136px;
    height: 48px;
    display: flex;
    align-items: center;
    font-family: 'PingFang-SC-Regular', 'PingFang SC', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    color: #171A1D;
    padding: 0 10px;
    box-sizing: border-box;
    position: absolute;
    z-index: 99;
    background-color: rgba(255, 255, 255, 1);
}

.identity img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

.identity i {
    width: 8px;
    height: 6px;
    background-image: url(https://cdn7.axureshop.com/demo2024/2281499/images/%E9%A6%96%E9%A1%B5/%E4%B8%8B%E6%8B%89_u164.svg);
    margin-left: 25px;
}

.identity:hover {
    background-color: #f2f4f8;
}

.identitys {
    position: absolute;
    right: 0;
    top: 48px;
    width: 136px;
    height: 88px;
    z-index: 30;
    background-color: rgba(255, 255, 255, 1);
    transition: all .1s;
}

.identitys p {
    width: 100%;
    height: 40px;
    background: inherit;
    font-family: 'PingFang-SC-Medium', 'PingFang SC Medium', 'PingFang SC ExtraLight', 'PingFang SC', sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 14px;
    color: rgba(23, 26, 29, 0.47843137254902);
    line-height: 40px;
}

.identitys p:hover {
    background-color: #f2f4f8;
}


</style>